@import '../../styles/variables';
@import '../../styles/mixins';

//== Shared style for sections

.designSection,
.structureSection,
.instructionsSection {
  @include fullWidth();
  @include contentPadding(20px, 40px);
}

.designSection,
.structureSection {
  h2 {
    color: $ms-color-neutralLighter;
    font-size: $ms-font-size-xxl;
    font-weight: $ms-font-weight-light;
    line-height: 1.2;
    margin-bottom: 48px;
    margin-top: 0;
    max-width: 12em;
  }
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .designSection,
  .structureSection,
  .instructionsSection {
    padding-top: 60px;
    padding-bottom: 120px;
  }

  .designSection,
  .structureSection {
    h2 {
      font-size: $font-size-bigger;
    }
  }
}

//== Design section

.designSection {
  @include headerAngles($ms-color-neutralPrimary);
  background-color: $color-getStarted-darker;
  color: $ms-color-neutralLighter;

  a:not(.title),
  a:visited,
  a:hover.title,
  .getStartedLink {
    border-bottom: 1px solid $ms-color-neutralLight;
  }

  a.title {
    border-bottom: 1px solid transparent;
  }

  a,
  a:hover,
  a:active,
  .getStartedLink {
    color: $ms-color-neutralLight;
  }
}

.feature {
  margin-bottom: 32px;

  .featureImage {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  img {
    height: 100%;
    margin-bottom: 8px;
    width: 80%;
  }

  .description {
    font-weight: $ms-font-weight-semilight;
    font-size: $ms-font-size-l;
    line-height: 1.5;
    color: $ms-color-neutralLight;
    max-width: 100%;
  }
}

.descriptionLarge {
  display: block;
  font-size: $ms-font-size-l;
  margin-top: $contentMargin-vertical;
  margin-bottom: $contentMargin-vertical;
  width: 70%;
}

.title {
  font-size: $font-size-big;
  font-weight: $ms-font-weight-semilight;
  margin-bottom: $contentMargin-vertical;
  display: table;
}

@media screen and (max-width: $uhf-screen-max-mobile) {
  .designSection .feature {
    float: none;
  }
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .contentInGrid {
    @include ms-padding-left($contentInGrid);
  }
}

//== Structure section (diagram)

.structureSection {
  color: $ms-color-neutralLighter;
  background-color: $ms-color-neutralPrimary;
}

//== Instructions section

.instructionsSection {
  max-width: 60em;

  // Push the second set of instructions down
  h2:not(:first-child) {
    margin-top: 120px;
  }

  h2 + p {
    font-size: $ms-font-size-l;
  }

  .getStartedLink {
    color: $color-getStarted-medium;
  }

  .trademark {
    margin-top: 80px;
  }

  :global(.ms-Button) {
    margin: 12px 0;
    // The color override is need because of the UHF
    color: $ms-color-white;

    @include high-contrast {
      color: Window;
    }
  }

  code {
    background-color: $ms-color-white;
    padding: 0 2px;
  }
}

.steps {
  counter-reset: li; // Start a counter of list items
  max-width: 50em;
  margin: 60px auto;
  @include ms-margin-right(0);

  li {
    list-style: none; // Remove the usual numbers
    position: relative;
    padding-bottom: 24px;
    padding-top: 56px;

    &:not(:last-child) {
      border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
      margin-bottom: 48px;
    }

    &::before {
      color: $color-getStarted-dark;
      content: counter(li); // Display counter
      counter-increment: li; // Increment based on list item
      font-size: $font-size-biggest;
      font-weight: $ms-font-weight-light;
      line-height: 38px; // Align top of number with top of list item
      position: absolute;
      top: 0;
    }
  }

  code {
    margin: 16px 0;
  }
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .steps {
    li {
      @include ms-padding-left(56px);
      padding-top: 0;

      &::before {
        @include ms-left(0);
      }
    }
  }
}
